<template>
	<view class="box">
		<view class="inputBox">
			<u-search placeholder="请输入商品" v-model="keyword" bgColor="#FFFFFF" :showAction="false" @search="getGoods"></u-search>
		</view>
		<view class="banner">
			<u-swiper :list="list1" height="360rpx" :indicator="true" :radius="10"></u-swiper>
		</view>
		<view class="manage" @click="toMeal" v-if="containsValueInArray([1])">
			<image class="manageImg" :src="configs + '/static/beer/index6.png'"></image>
		</view>
		<view class="goodsBox">
			<view class="goodsLi" v-for="(item,index) in list" :key="index" @click="toDetails(item.id)">
				<image class="goodsLiImg" :src="item.picUrl"></image>
				<view class="liInfoBox">
					<view class="goodsTitle">
						{{item.name}}
					</view>
					<view class="contIntro">
						{{item.context}}
					</view>
					<view class="goodPrice">
						<view class="price" v-if="item.specsList[0].levelPrice">
							<text style="font-size: 20rpx;">￥</text>{{(item.specsList[0].levelPrice/100).toFixed(2)}}
							<text class="oldPrice">￥{{(item.specsList[0].price/100).toFixed(2)}}</text>
						</view>
						<view class="price" v-else>
							<text style="font-size: 20rpx;">￥</text>{{(item.specsList[0].price/100).toFixed(2)}}
						</view>
						<view class="priceRight">
							已售{{item.purchaseSalesCount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<image src="https://beer.hemazf.cn:19000/static/img/shop/share/beerc.jpg" class="bannerImg"></image>
		<view class="icons" @click="trigger" v-if="containsValueInArray([1])">
			<image src="@/static/images/icon/shop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		goodsPage
	} from "@/api/work/work.js"
	import config from '@/config'
	export default {
		name:"workIndex",
		data() {
			return {
				list1: [
					'http://192.168.10.213:19000/static/beer/index1.png',
					'http://192.168.10.213:19000/static/beer/index4.png'
				],
				keyword:'',
				list:[],//订单数据
				configs:'',
				// pageNum: 1,//页码
				// listnum:0,//列表长度
			}
		},
		onShow() {
			this.getGoods()
		},
		onLoad () {
			this.configs = config.baseUrl + ':19000'
			this.list1 = [
				config.baseUrl + ':19000/static/beer/index1.png',
				config.baseUrl + ':19000/static/beer/index4.png',
			]
		},
		methods: {
			//判断是否含有指定身份的函数
			containsValueInArray(value) {
				let array = this.$store.getters.tagIds
				let ret = false
				value.forEach(item => {
					if (array.includes(item)) {
						ret = true
					}
				});
				return ret;
			},
			toMeal(){
				this.$tab.navigateTo('/pagesA/meal/meal')
			},
			//跳转购物车
			trigger() {
				this.$tab.navigateTo('/pages/shopCart/shopCart?type=' + true)
			},
			//跳转详情
			toDetails(e){
				this.$tab.navigateTo('/pages/details/details?id=' + e + '&type=' + 2)
			},
			//获取商品列表
			getGoods(){
				console.log(111)
				let that = this
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					name:that.keyword,
          isHome: true
				}
				goodsPage(data).then(response => {
					uni.hideLoading()
					// that.listnum = response.data.total
					// if(that.list.length<response.data.total){
					// 	// that.list = that.list.concat(res.data.rows)
					// 	that.list = that.list.concat(response.data.list)
					// }
					that.list = response.data	
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		/* margin-top: 12vh; */
		min-height: 80vh;
		padding-bottom: 1vh;
		background-color: #F5F5F5;
	}

	.inputBox {
		width: 690rpx;
		height: 60rpx;
		margin: 30rpx auto;
	}

	.banner {
		width: 690rpx;
		height: 360rpx;
		margin: 0 auto;
	}

	.manage {
		width: 690rpx;
		height: 240rpx;
		margin: 30rpx auto 10rpx auto;
		overflow: hidden;
	}
.manageImg{
	width: 690rpx;
	height: 240rpx;
}

	.goodsBox {
		width: 690rpx;
		height: fit-content;
		margin: 20rpx auto 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.goodsLi {
		width: 334rpx;
		height: 528rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.goodsLi:nth-child(2n) {
		margin-left: 22rpx;
	}

	.goodsLiImg {
		width: 334rpx;
		height: 336rpx;
		border-radius: 20rpx
	}

	.liInfoBox {
		width: 294rpx;
		height: 140rpx;
		margin: 20rpx;
	}

	.goodsTitle {
		width: 294rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.contIntro {
		width: 294rpx;
		height: 68rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goodPrice {
		width: 294rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.price {
		width: 140rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #E84E22;
	}

	.priceRight {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: end;
	}

	.icons {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;
		position: fixed;
		bottom: 200rpx;
		left: 50rpx;
	}

	.icons image {
		width: 100%;
		height: 100%;
	}

	/* 弹出层 */
	.pupBox {
		width: 500rpx;
		height: 650rpx;
	}
	
	.pupImg{
		width: 490rpx;
		height: 490rpx;
		display: block;
		margin: 0 auto;
	}
	.titMsg{
		width: 500rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 25rpx;
		text-align: center;
		color: #E84E22;
		margin-top: 20rpx;
	}
	.pupName{
		width: 500rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	
	.oldPrice{
		font-size: 18rpx;
		text-decoration: line-through;
		color: #999999;
		margin-left: 10rpx;
	}
	.bannerImg{
		width: 690rpx;
		height: 690rpx;
		margin: 10rpx auto;
		display: block;
		border-radius: 10rpx;
	}
</style>